<template>
  <div class="cp7">
    <h1>Lazy Sudoku</h1>
    <p>Keep hitting the shuffle button until you win.</p>

    <button @click="shuffle">
      Shuffle
    </button>
    <transition-group name="cell" tag="div" class="container">
      <div v-for="cell in cells" :key="cell.id" class="cell">
        {{ cell.number }}
      </div>
    </transition-group> 
  </div>
</template>
<script>
import dynamics from 'dynamics.js';
export default {
  data() {
    return {
      cells: Array.apply(null, { length: 81 }).map(function (_, index) {
        return {
          id: index,
          number: (index % 9) + 1
        };
      })
    }
  },
  methods: {
    shuffle: function () {
      this.cells = _.shuffle(this.cells);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  width: calc(27px * 9);
  margin-top: 10px;
}

.cell {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #aaa;
  margin-right: -1px;
  margin-bottom: -1px;
}

.cell:nth-child(3n) {
  margin-right: 2px;
}

.cell:nth-child(27n) {
  margin-bottom: 10px;
}

.cell-move {
  transition: transform 1s;
}
</style>